<script setup lang="ts">
import * as THREE from 'three';
import {onMounted, ref} from "vue";

let dom = ref();

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
// 创建圆的几何体，参数分别是半径，分段数（增加可以使得圆更平滑，但更多的分段会使得创建的几何体更复杂）
const geometry = new THREE.CircleGeometry(5, 50);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x75e8e7 });
// 使用几何体和材质创建一个网格
let circle = new THREE.Mesh(geometry, material);
let camera = null;

const animate = () => {
  // requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

onMounted(()=>{
  window.addEventListener("keyup",function (e:any) {
    // 按键按下事件 keyCode：左->37 右->39 上->38 下->40
    let { keyCode } = e;
    switch (keyCode) {
      case 37:
        circle.position.x -=1;

        // camera.position.x += 1;
        break;
      case 38:
        circle.position.y += 1;
        break;
      case 39:
        circle.position.x += 1;
        break;
      case 40:
        circle.position.y -= 1;
        break;
    }
    animate();
  })
  // 创建场景
  // 设置场景背景颜色
  scene.background = new THREE.Color(0x282c34);
// 创建一个相机
  camera = new THREE.PerspectiveCamera(100, dom.value.offsetWidth / dom.value.offsetHeight, 0.1, 1000);

// 创建渲染器
  renderer.setSize(dom.value.offsetWidth, dom.value.offsetHeight);
  dom.value.appendChild(renderer.domElement);

  circle.position.x = 0;

// 将圆添加到场景中
  scene.add(circle);

// 设置相机位置和目标点
  camera.position.z = 15;

// 渲染场景

  // 添加动画
  // let animate = function () {
  //   requestAnimationFrame(animate);
  //
  //   // 更新物体位置
  //   circle.position.x += 0.01; // 每帧向右移动0.01单位
  //
  //   renderer.render(scene, camera);
  // };

  animate();
})
</script>

<template>
  <HeaderMenu activeIndex="3" sticky />
  <div class="fishelement" ref="dom">

  </div>
</template>

<style lang="scss" scoped>
.fishelement{
  width: 100%;
  height: calc(100vh - 85px);
}
</style>
